<script setup lang="ts">
import SlideBar from "../components/SlideBar.vue";
import { RouterView } from "vue-router";
// 导入面包屑组件
import BreadCom from "../components/BreadCom.vue";
import { ref } from "vue";
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons-vue";

const selectedKeys = ref<string[]>(["1"]);
const collapsed = ref<boolean>(false);

import { InfoFilled } from "@element-plus/icons-vue";
import ShowMessage from "../utils/ShowMessage.ts";

// 导入vuex仓库
import store from "../stores";

import { useRouter } from "vue-router";
const router = useRouter();

// 确认退出
const confirmEvent = () => {
  console.log("confirm!");
  //   1、弹出信息提示框  退出成功
  ShowMessage("退出成功", "success");
  // 2、删除token
  localStorage.setItem("token", "");
  store.commit("setToken", "");

  // 3、跳到登录页面
  router.push("/login");
};
//取消退出
const cancelEvent = () => {
  console.log("cancel!");
};

let username = ref("username");

username.value = localStorage.getItem("username");
</script>

<template>
 <div>
    <a-layout>
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      class="layout"
    >
      <!-- logo 图 -->
      <div class="logo">
        <img src="../assets/logo2.webp" style="width: 60px; height: 60px" />
        <div class="user">{{ username }}管理员</div>

        <!-- 退出按钮 -->
      </div>
      <!-- 左边侧边导航栏 -->

      <SlideBar></SlideBar>
    </a-layout-sider>

    <!-- 右边内容区域 -->
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />

        <el-popconfirm
          confirm-button-text="Yes"
          cancel-button-text="No"
          :icon="InfoFilled"
          icon-color="#626AEF"
          title="您确定要退出吗？"
          @confirm="confirmEvent"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-button class="logout" type="primary">退出</el-button>
          </template>
        </el-popconfirm>
      </a-layout-header>

      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <!-- 面包屑 -->
        <BreadCom></BreadCom>

        <!-- 二级路由的出口 -->
        <!-- <RouterView></RouterView> -->

        <!-- 给路由添加动态效果 -->
        <RouterView v-slot="{ Component }">
          <transition mode="out-in">
            <component :is="Component"></component>
          </transition>
        </RouterView>

      </a-layout-content>
    </a-layout>
  </a-layout>
 </div>
</template>

<style scoped lang="less">
.layout {
  height: 100vh;
  width: 100vw;
  //  padding:20px;
  .logo {
    color: white;
    text-align: center;
    img {
      margin-top: 30px;
    }
    .user {
      margin: 20px auto;
    }
  }
}
.logout {
  float: right;
  margin-top: 10px;
  margin-right: 50px;
}
.trigger {
  font-size: 30px;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}


// 添加动画样式
.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateX(50px);
}


.v-enter-active,
.v-leave-active {
  transition: 0.2s;
}



</style>
